<template>
  <el-dropdown
    v-model:visible="visible"
    :trigger="trigger"
    :placement="placement"
    :size="size"
    :type="type"
    :split-button="splitButton"
    :disabled="disabled"
    :show-timeout="showTimeout"
    :hide-timeout="hideTimeout"
    :popper-class="popperClass"
    :popper-style="popperStyle"
    :teleported="teleported"
    @command="handleCommand"
  >
    <template #default>
      <slot></slot>
    </template>
    <template #dropdown>
      <el-dropdown-menu>
        <template v-for="item in items" :key="item.value">
          <el-dropdown-item
            v-if="!item.children"
            :command="item.value"
            :disabled="item.disabled"
            :divided="item.divided"
          >
            <el-icon v-if="item.icon">
              <component :is="item.icon" />
            </el-icon>
            {{ item.label }}
          </el-dropdown-item>
          <el-dropdown-item
            v-else
            :command="item.value"
            :disabled="item.disabled"
            :divided="item.divided"
          >
            <el-icon v-if="item.icon">
              <component :is="item.icon" />
            </el-icon>
            {{ item.label }}
            <el-icon class="el-icon--right">
              <arrow-right />
            </el-icon>
          </el-dropdown-item>
          <el-dropdown-menu
            v-if="item.children"
            :slot="item.value"
          >
            <el-dropdown-item
              v-for="child in item.children"
              :key="child.value"
              :command="child.value"
              :disabled="child.disabled"
              :divided="child.divided"
            >
              <el-icon v-if="child.icon">
                <component :is="child.icon" />
              </el-icon>
              {{ child.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import type { DropdownEvents, DropdownOptions } from './types'

const props = withDefaults(defineProps<{
  modelValue?: boolean
  items: DropdownOptions['items']
  trigger?: DropdownOptions['trigger']
  placement?: DropdownOptions['placement']
  size?: DropdownOptions['size']
  type?: DropdownOptions['type']
  splitButton?: boolean
  disabled?: boolean
  showTimeout?: number
  hideTimeout?: number
  popperClass?: string
  popperStyle?: Record<string, any>
  teleported?: boolean
}>(), {
  modelValue: false,
  trigger: 'hover',
  placement: 'bottom',
  size: 'default',
  type: 'primary',
  splitButton: false,
  disabled: false,
  showTimeout: 0,
  hideTimeout: 0,
  teleported: true
})

const emit = defineEmits<DropdownEvents>()

const visible = ref(props.modelValue)

watch(() => props.modelValue, (val) => {
  visible.value = val
})

watch(visible, (val) => {
  emit('update:modelValue', val)
})

const handleCommand = (command: string | number) => {
  emit('command-click', command)
}
</script>

<style scoped>
.el-dropdown {
  display: inline-block;
}
</style> 